<template>
    <div>
              <h3>欢迎注册</h3>
              <el-form ref="form"  :model="user" label-width="80px" label-position="left">
                    <el-form-item label="邮箱：">
                        <el-input  v-model="user.email" style="width: 40%;"></el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                      <el-input v-model="user.password" show-password style="width: 40%;"></el-input>
                    </el-form-item>
                    <el-form-item label="昵称：">
                        <el-input  v-model="user.nickName" style="width: 40%;"></el-input>
                    </el-form-item>
                    <el-form-item label="验证码">
                          <el-input v-model="user.verifyCode" tyle="width: 40%;"></el-input>
                          <el-button  type="success" @click="getCode" :disabled="disabled">{{btn}}</el-button>
                    </el-form-item>
                    <el-form-item label="上传头像">
                        <!--  :http-request="handleFile" -->
                        <el-upload
                            class="avatar-uploader"
                            :http-request="handleFile"
                            action="#"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">注册</el-button>
                    </el-form-item>
                </el-form>
    </div>
</template>

<script>
import {postRequest,getRequest} from '../utils/api.js'
export default {
  name: 'Register',

  data() {
    return {
      user:{
        nickName:"",
        email:'',
        password:'',
        verifyCode:'',
      },
      btn:'获取验证码',
      disabled:false,
      uploadFile:{},//表单内上传
      imageUrl:'',//回显图片
      avatar:false,//标记头像是否为空
    };
  },

  mounted() {
    
  },

  methods: {


      // 获得验证码
      getCode(){
           var reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;//正则表达式
            if( this.user.email =='' || !reg.test(this.user.email)){
                this.$message.error("邮箱格式错误,请输入正确的邮箱");
                return false;
            }
          getRequest('/user/user/code/'+this.user.email).then((result) => {

          }).catch((err) => {
            
          });
          let time = 60;
          this.btn = time + "s";
          this.disabled = true;
          let intervalId = setInterval(()=>{
            time --;
            this.btn = time + "s";
            if(time <=0){
              this.disabled = false;
              this.btn = "获取验证码"
              clearTimeout(intervalId);
            }
          },1000);
      },
       /**验证 */
       validate(){
            var reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;//正则表达式
            if( this.user.email =='' || !reg.test(this.user.email)){
                this.$message.error("邮箱格式错误,请输入正确的邮箱");
                return false;
            }
            if(this.user.password == ''){
               this.$message.error("密码不能为空");
                return false;
            }
            if(this.user.nickName == ''){
               this.$message.error("昵称不能为空");
                return false;
            }
            if(this.user.verifyCode == ''){
               this.$message.error("请输入验证码");
                return false;
            }
            if(!this.avatar){
               this.$message.error("必须上传头像");
                return false;
            }
            return true;
                
        },
      onSubmit(){
        
          if(!this.validate())
            return;
           
           let formData = new FormData();
            formData.append("uploadFile",this.uploadFile);
            for(let s in this.user){
                formData.append(s,this.user[s])
            }
            console.log("===");
           postRequest('/user/user/register',formData).then(result=>{
             if(result){
                this.$router.push({
                      name:'home',
                  })
               }
            }).catch((err)=>{

            });
      },

      handleFile(param) {
            this.uploadFile = param.file;
            this.imageUrl = URL.createObjectURL(param.file);
            this.avatar = true;
           
        },
          handleAvatarSuccess(res, file) {
           
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 5;

            if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 5MB!');
            }
            return isJPG && isLt2M;
        }
    
  },
};
</script>

<style  scoped>
    .el-icon-plus {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
   .el-icon-plus:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  h3{
      text-align: center;
      margin-top: 50px;
  }
</style>